<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader1 />
    <el-container>
      <el-aside width="300px" style="height: 1000px; ">
        <el-card shadow="hover" class="aside">
          <div
            v-for="article in info.results"
            v-bind:key="article.url"
            id="articles"
          >
            <h4>
              <router-link
                :to="{ name: 'ArticleDetail', params: { id: article.id } }"
                class="article-title"
                @click="refresh"
              >
                {{ article.title }}
              </router-link>
            </h4>
          </div>
        </el-card>
        <br />
        <div id="paginator">
          <span v-if="is_page_exists('previous')">
            <router-link
              :to="get_path('previous')"
              @click="refresh"
              class="page"
            >
              👈
            </router-link>
          </span>
          <span class="current-page">
            {{ get_page_param("current") }}
          </span>
          <span v-if="is_page_exists('next')">
            <router-link :to="get_path('next')" @click="refresh" class="page">
              👉
            </router-link>
          </span>
        </div>
        <br /><br />
        <div class="cat">
          <img :src="imgUrl1" width="85" />
        </div>
        <el-card :body-style="{ padding: '0px' }">
          <img :src="imgUrl" class="image" />
        </el-card>
      </el-aside>
      <el-container>
        <el-main style="height: 1200px; ">
          <el-card shadow="always" class="box-card">
            <div v-if="article !== null" class="grid-container">
              <div>
                <h1 id="title">{{ article.title }}</h1>
                <p id="subtitle">
                  本文由 {{ article.author.username }} 发布于
                  {{ formatted_time(article.created) }}

                  <span v-if="isSuperuser">
                    <router-link
                      :to="{ name: 'ArticleEdit', params: { id: article.id } }"
                      class="update"
                    >
                      &nbsp;更新与删除
                    </router-link>
                  </span>
                </p>

                <div
                  v-html="article.body_html"
                  class="article-body"
                  v-highlight
                ></div>
              </div>
              <!--
                <div>
                    <h3>目录</h3>
                    <div v-html="article.toc_html" class="toc"></div>
                </div>
                -->
            </div>
          </el-card>
          <br /><br /><br />
          <el-card shadow="always" class="item-card">
            <div v-if="article !== null" class="grid-container">
              <div class="article-item">文章标题：{{ article.title }}</div>
              <div class="article-item">
                文章链接：{{ re_url(article.url) }}
              </div>
              <div class="article-item">
                发布时间：{{ formatted_time(article.created) }}
              </div>
              <div class="article-item">
                许可协议:<a
                  class="item-link"
                  href="https://creativecommons.org/licenses/by-nc/4.0/"
                  target="_blank"
                >
                  署名-非商业性使用 4.0 国际许可协议</a
                >
              </div>
            </div>
          </el-card>
        </el-main>
        <el-footer> </el-footer>
      </el-container>
    </el-container>
    <!--<Comments :article="article" />-->
    <el-backtop :bottom="100">
      <div>
        up
      </div>
    </el-backtop>
    <BlogFooter />
  </div>
</template>

<script>
import BlogHeader1 from "@/components/BlogHeader1.vue";
import BlogFooter from "@/components/BlogFooter.vue";
//import Modal from "@/components/Modal.vue";
//import Comments from '@/components/Comments.vue'
import { ref } from "vue";
import { useRoute } from "vue-router";
import getArticleData from "@/composables/getArticleData.js";
import pagination from "@/composables/pagination.js";
import formattedTime from "@/composables/formattedTime.js";
import axios from "axios";

export default {
  name: "ArticleDetail",
  //components: {BlogHeader, BlogFooter,Comments},
  components: { BlogHeader1, BlogFooter },
  setup() {
    const info = ref("");
    // 创建路由
    const route = useRoute();
    const kwargs = ref({ page: 0, searchText: "" });
    getArticleData(info, route, kwargs);
    const { is_page_exists, get_page_param, get_path } = pagination(
      info,
      route
    );
    const formatted_time = formattedTime;

    return {
      info,
      is_page_exists,
      get_page_param,
      get_path,
      formatted_time,
    };
  },
  data: function() {
    return {
      article: null,
    };
  },
  mounted() {
    axios
      .get("/api/article/" + this.$route.params.id)
      .then((response) => (this.article = response.data));
  },
  computed: {
    isSuperuser() {
      return localStorage.getItem("isSuperuser.myblog") === "true";
    },
  },
  methods: {
    refresh: function() {
      this.$router.go(0);
    },
    re_url: function(str) {
      const url = str.replace("/api", "");
      return url;
    },
  },
  created() {
    let urlTemp = "static/gzh.jpg";
    this.imgUrl = require("@/" + urlTemp);
    let urlTemp1 = "static/2.gif";
    this.imgUrl1 = require("@/" + urlTemp1);
  },
};
</script>

<style scoped>
.grid-container {
  display: grid;
  font-family: KaiTi, Georgia, Arial, sans-serif;
}

#title {
  text-align: center;
  font-size: x-large;
}

#subtitle {
  text-align: center;
  color: gray;
  font-size: small;
}
</style>

<style>
.article-body p img {
  max-width: 100%;
  font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
  /*border-radius: 50px;
  box-shadow: gray 0 0 20px;*/
}
.article-body code {
  background: whitesmoke;
}
.article-body {
  font-size: 18px;
  line-height: 2em;
}

.toc ul {
  list-style-type: none;
}

.toc a {
  color: gray;
}

.text {
  font-size: 20px;
}

.item {
  padding: 30px 0;
}

.article-title {
  color: grey;
  text-decoration: none;
  padding: 5px 0 5px 0;
  font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
}
.article-title:hover {
  color: LightSkyBlue;
}
.aside {
  padding-top: 20px;
}
.grid-container {
  font-size: 18px;
}
.article-item {
  padding: 5px;
}
.item-link {
  color: black;
  text-decoration: none;
}
.item-link:hover {
  color: lightskyblue;
}
.image {
  width: 100%;
  display: block;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#paginator {
  text-align: center;
  font-family: "Verdana";
}
.current-page {
  font-family: "Verdana";
}
.page {
  text-decoration: none;
  color: black;
}
.page:hover {
  color: lightskyblue;
}
.update {
  color: black;
  text-decoration: none;
}
.update:hover {
  color: lightskyblue;
}
.cat {
  text-align: center;
}
</style>
